import { defineStore } from 'pinia';
import { computed, ref, watch } from 'vue';
import router from '@/router';
import { type RouteLocationMatched, type RouteLocationNormalizedLoaded, useRoute } from 'vue-router';
import { LOGIN_NAME, REDIRECT_NAME, PAGE_NOT_FOUND_NAME } from '@/router/constant';

/** 不需要出现在标签页中的路由 */
export const routeExcludes = [REDIRECT_NAME, LOGIN_NAME, PAGE_NOT_FOUND_NAME] as const;

export const useTabsViewStore = defineStore(
  'tabs-view',
  () => {
    const currentRoute = useRoute();
    const tabsList = ref<RouteLocationNormalizedLoaded[]>([]);

    /** 当前活动页 */
    const getCurrentTab = computed(() => {
      return tabsList.value.find(item => {
        return item && !isInRouteExcludes(item) && item.fullPath === currentRoute.fullPath;
      });
    });

    const getTabsList = computed(() => {
      return tabsList.value.filter(item => {
        return item && !isInRouteExcludes(item) && router.hasRoute(item.name!);
      });
    });

    /** 给定的路由是否在排除名单里面 */
    const isInRouteExcludes = (route: RouteLocationNormalizedLoaded) => {
      return routeExcludes.some(n => n === route.name);
    };

    /** 获取原始路由 */
    const getRawRoute = (route: RouteLocationNormalizedLoaded): RouteLocationNormalizedLoaded => {
      return {
        ...route,
        matched: route.matched.map(item => {
          const { meta, path, name } = item;
          return { meta, path, name };
        }) as RouteLocationMatched[]
      };
    };

    const addTabs = (route: RouteLocationNormalizedLoaded) => {
      if (isInRouteExcludes(route)) {
        return false;
      }
      const isExists = tabsList.value.some(item => item.fullPath === route.fullPath);
      if (!isExists) {
        // 截取后六个
        tabsList.value.push(getRawRoute(route));

        setTimeout(() => (tabsList.value = tabsList.value.slice(-6)), 300);
      }
      return true;
    };

    /** 关闭左侧标签页 */
    const closeLeftTabs = (route: RouteLocationNormalizedLoaded) => {
      const index = tabsList.value.findIndex(item => item.fullPath === route.fullPath);
      if (index === -1) {
        return;
      }
      tabsList.value.splice(0, index);
    };

    /** 关闭右侧标签页 */
    const closeRightTabs = (route: RouteLocationNormalizedLoaded) => {
      const index = tabsList.value.findIndex(item => item.fullPath === route.fullPath);
      if (index === -1) {
        return;
      }
      tabsList.value.splice(index + 1);
    };

    /** 关闭当前标签页 */
    const closeCurrentTabs = (route: RouteLocationNormalizedLoaded) => {
      const index = tabsList.value.findIndex(item => item.fullPath === route.fullPath);
      const isDelCurrentTab = Object.is(getCurrentTab.value, tabsList.value[index]);
      tabsList.value.splice(index, 1);
      if (isDelCurrentTab) {
        const currentRoute = tabsList.value[Math.max(0, tabsList.value.length - 1)];
        router.push(currentRoute || '/');
      }
    };

    /** 关闭其他标签页 */
    const closeOtherTabs = (route: RouteLocationNormalizedLoaded) => {
      const targetIndex = tabsList.value.findIndex(item => item.fullPath === route.fullPath);
      if (targetIndex === -1) {
        return;
      }
      tabsList.value = tabsList.value.splice(targetIndex, 1);
    };

    watch(
      () => currentRoute.fullPath,
      () => {
        addTabs(currentRoute);
      },
      { immediate: true }
    );

    return {
      tabsList,
      getTabsList,
      getCurrentTab,
      addTabs,
      closeLeftTabs,
      closeRightTabs,
      closeCurrentTabs,
      closeOtherTabs
    };
  },
  {
    persist: {
      paths: ['tabsList']
    }
  }
);
